<template>
	<view class="content">
		<view>
			<img class="bg" src="../../static/bg.png" alt="">
		</view>
		<view class="panel">
			<view class="u-time-axis">
				<view class="modular">
					<view class="panel-title">选择店员性别</view>
					<view class="gender-plate">
						<view class="p-flex">
							<view class="ico-img">
								<image src="../../static/ico/boy.png" mode=""></image>
							</view>
							<text class="sex-text" :class="{'male':add_class==1}" @click="addClass(1)">男生</text>
						</view>
						<view class="p-flex">
							<view class="ico-img">
								<image src="../../static/ico/girl.png" mode=""></image>
							</view>
							<text class="sex-text" :class="{'female':add_class==2}" @click="addClass(2)">女生</text>
						</view>
					</view>
					<view class="u-time-axis-node" style="background-color: rgb(255, 255, 255); top: 0rpx;">
						<view class="u-dot"></view>
					</view>
				</view>
				<view class="modular">
					<view class="panel-title">选择等级</view>
					<view class="gender-plate">
						<view class="p-flex">
							<view class="ico-img">
								<image src="../../static/ico/grade1.png" mode=""></image>
							</view>
							<text class="grade sex-text" :class="{'grade1':adds_class==1}"
								@click="addsClass(1)">普通</text>
						</view>
						<view class="p-flex">
							<view class="ico-img">
								<image src="../../static/ico/grade2.png" mode=""></image>
							</view>
							<text class="grade sex-text" :class="{'grade2':adds_class==2}"
								@click="addsClass(2)">金牌</text>
						</view>
						<view class="p-flex">
							<view class="ico-img">
								<image src="../../static/ico/grade3.png" mode=""></image>
							</view>
							<text class="grade sex-text" :class="{'grade3':adds_class==3}"
								@click="addsClass(3)">镇店</text>
						</view>
						<view class="p-flex">
							<view class="ico-img">
								<image src="../../static/ico/grade4.png" mode=""></image>
							</view>
							<text class="grade sex-text" :class="{'grade4':adds_class==4}"
								@click="addsClass(4)">神级</text>
						</view>

						<view class="p-flex">
							<view class="ico-img">
								<image src="../../static/ico/grade5.png" mode=""></image>
							</view>
							<text class="grade sex-text" :class="{'grade5':adds_class==5}"
								@click="addsClass(5)">首席</text>
						</view>
					</view>
					<view class="u-time-axis-node" style="background-color: rgb(255, 255, 255);">
						<view class="u-dot"></view>
					</view>
				</view>

				<view class="modular" v-if="show">
					<view class="panel-title">服务类型</view>
					<view class="service">
						<view class="service-content" v-for="(item,index) in list" :key="index" @click="nav(index)"
							:class="one ==index?'active':''">
							<text class="text" :class="one ==index?'actives':''">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="one !== -1">
						<view class="service-options">选项</view>
						<view class="service">
							<view class="service-content" v-for="(item,index) in data" :key="index" @click="navs(index)"
								:class="two ==index?'active':''">
								<text class="text" :class="two ==index?'actives':''">{{item.name}}</text>
							</view>
						</view>
					</view>
					<view class="u-time-axis-node" style="background-color: rgb(255, 255, 255);">
						<view class="u-dot"></view>
					</view>
				</view>

				<view class="modular">
					<view class="exclude">
						<view class="panel-title">是否排除已随机过的店员</view>
						<view>
							<switch :checked="flag" @change="switch2Change" color="#B2CAD9" />
						</view>
					</view>
					<view class="u-time-axis-node" style="background-color: rgb(255, 255, 255);">
						<view class="u-dot"></view>
					</view>
				</view>

				<view class="modular">
					<view class="purchase">
						<view class="panel-title">购买数量</view>
						<view class="">
							<text class="number" @click="numlose">-</text>
							<text class="number">{{num}}</text>
							<text class="number" @click="numadd">+</text>
						</view>
					</view>
					<view class="u-time-axis-node" style="background-color: rgb(255, 255, 255);">
						<view class="u-dot"></view>
					</view>
				</view>
				<view class="modular">
					<view class="purchase">
						<view class="panel-title">微信号</view>
						<input class="input-wechat" style="text-align: right;" type="text" v-model="WXcode"  placeholder="请输入您的微信号">
					</view>
					<view class="u-time-axis-node" style="background-color: rgb(255, 255, 255);">
						<view class="u-dot"></view>
					</view>
				</view>
				<view class="modular">
					<view class="panel-title">许个愿望吧~</view>
					<textarea class="input-desire" auto-height type="text" v-model="wish" 
						placeholder="请输入您的愿望" />
					<view class="u-time-axis-node" style="background-color: rgb(255, 255, 255);">
						<view class="u-dot"></view>
					</view>
				</view>
				<view class="modular">
					<view class="panel-title">支付方式</view>
					<view class="payment-item">
						<radio-group @change="radioChange">
							<label class="payment-list-cell" v-for="(item, index) in items" :key="index">
								<view>
									<radio :value="item.value" :checked="index === current" />
								</view>
								<view class="payment">
									<view class="wechat-payment" v-if="index == 1 ">
										<image src="../../static/logo.png" mode=""></image>
									</view>
									{{item.name}}
								</view>
							</label>
						</radio-group>
					</view>
					<view class="u-time-axis-node" style="background-color: rgb(255, 255, 255);">
						<view class="u-dot"></view>
					</view>
				</view>
			</view>
			<view class="lower-single">
				<view>
					<text>恋豆：</text>
					<text>-</text>
				</view>
				<view class="buy-now" @click="order">
					<text>立即下单</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: [],
				one: -1,
				two: -1,
				num: 1,
				WXcode: "", //微信号
				wish: "", //愿望
				add_class: '',
				adds_class: '',
				items: [{
						name: '支付宝支付（余额0）',
						value: "1"
					},
					{
						name: '微信支付',
						value: "2"
					},
				],
				list: [],
				current: 0,
				show: false,
				va: 1,
				flag: false
			}
		},
		onLoad() {
			this.Create()
		},
		methods: {
			order() {
				if (this.add_class == '') {
					uni.showToast({
						title: "请选择性别",
						icon: "none"
					})
				} else if (this.adds_class == '') {
					uni.showToast({
						title: "请选择等级",
						icon: "none"
					})
				} else if (this.one == -1) {
					uni.showToast({
						title: "请选择服务类型",
						icon: "none"
					})
				} else if (this.two == -1) {
					uni.showToast({
						title: "请选择服务类型",
						icon: "none"
					})
				} else if (this.WXcode == '') {
					uni.showToast({
						title: "请填写微信号",
						icon: "none"
					})
				} else {
					this.orders()
				}

			},
			orders() {
				var obj = {
					sex: this.add_class,
					wechat: this.WXcode,
					skuId: this.list[this.one].skuId,
					num: this.num,
					orderType: 2,
					payMode: this.va,
					remark: this.wish,
					exclude: this.flag==true?1:2,
					grade: this.adds_class
				}
				this.$http.createOrder("/api/user/createOrder", obj ).then(res => {
					console.log(res);
				});
			},
			radioChange(e) {

				this.va = e.detail.value
				console.log(e, this.va)
			},
			switch2Change(e) {
				console.log(e)
				this.flag = e.detail.value
			},
			nav(i) {
				this.one = i
				this.data = this.list[i].children
			},
			navs(i) {
				this.two = i
			},
			Create() {
				this.$http.random("/api/order/random", ).then(res => {
					console.log(res.data);
					this.list = res.data
					this.data = res.data[0].children
					console.log(this.list, this.data, "[[[[[[[shuzu]]]]]]]")
					this.show = true
				});
			},
			numadd() {
				this.num++
			},
			numlose() {
				if (this.num <= 1) {
					uni.showToast({
						title: "最少数量1",
						icon: "none"
					})
				} else {
					this.num--
				}
			},
			index() {
				let path = '';
				let data = {};
				let method = '';
				getApp().http(path, data, method, function(res) {
					console.log(res);
				})
			},
			// 动态添加class,选择性别
			addClass(index) {
				this.add_class = index;
				console.log(this.add_class, "[[[]]]")
			},
			// 动态添加class, 选择等级
			addsClass(index) {
				this.adds_class = index;
				console.log(this.adds_class, "[[[]]]")
			}

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to bottom, #B2CAD9 0%, #D4C3CF 25%, #EDDDE2 50%, #FDFCFC 100%);
	}

	.bg {
		width: 100%;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
	}

	.panel {
		z-index: 1;
		background-color: #fff;
		border-radius: 4px;
		margin: 0 auto;
		margin-top: 300rpx;
		position: relative;
		padding: 13px 0;
		width: 90%;
		padding-right: 20rpx;

	}

	.u-time-axis {
		position: relative;
		padding-left: 58rpx;
	}

	.u-time-axis::before {
		content: " ";
		position: absolute;
		left: 29rpx;
		top: 0;
		width: 1rpx;
		bottom: 0;
		border-left: 1rpx solid #ddd;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scaleX(.5);
		transform: scaleX(.5);
	}

	.u-time-axis-node {
		position: absolute;
		top: 20rpx;
		left: -28rpx;
		-webkit-transform-origin: 0;
		transform-origin: 0;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		z-index: 1;
		font-size: 20rpx;
	}

	.u-dot {
		height: 12rpx;
		width: 12rpx;
		border-radius: 80rpx;
		background: #ddd;
	}

	.modular {
		margin-bottom: 34rpx;
		position: relative;
	}

	.panel-title {
		font-size: 34rpx;
		font-family: FZLTHJW;
		font-weight: 700;
		color: #000;
		line-height: 25px;
		/* 	margin-bottom: 15rpx; */

	}

	.gender-plate {
		margin-top: 28rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.p-flex {
		display: flex;
		align-items: center;
		border-radius: 25rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.ico-img {
		width: 55rpx;
		height: 55rpx;
		margin-right: 10rpx;
	}

	.ico-img image {
		width: 55rpx;
		height: 55rpx;
	}

	.sex-text {
		color: #fff;
		font-size: 30rpx;
		line-height: 55rpx;
		margin-right: 20rpx;
		background-color: #b8b8b8;
		padding-right: 17rpx;
		padding-left: 24rpx;
		margin-left: -30rpx;
		border-top-right-radius: 188rpx;
		border-bottom-right-radius: 188rpx;
		text-align: right;
		width: 50%;

	}

	.male {
		background-color: #788FF3;
	}

	.female {
		background-color: #F1797A;
	}

	.grade {
		background-color: #e6e6e6;
		color: #8F8FAB;
		font-size: 30rpx;
		line-height: 55rpx;
		margin-right: 20rpx;
	}

	.grade1 {
		background-color: #BBC8D9;
		color: #FFFFFF;
	}

	.grade2 {
		background-color: #FDBF5F;
		color: #FFFFFF;
	}

	.grade3 {
		background-color: #60A0F1;
		color: #FFFFFF;
	}

	.grade4 {
		background-color: #C972F7;
		color: #FFFFFF;
	}

	.grade5 {
		background-color: #FCA069;
		color: #FFFFFF;
	}

	/* 服务类型 */
	.service {
		display: flex;
		flex-wrap: wrap;
		margin-top: 28rpx;
	}

	.service-content {
		background-color: #ECECEC;
		border-radius: 25rpx;
		min-height: 60rpx;
		margin-bottom: 30rpx;
		margin-right: 20rpx;
	}

	.text {
		color: #838383;
		margin: 20rpx;
		line-height: 60rpx;
		font-size: 32rpx;
	}

	.active {
		background-color: #1777ff;
	}

	.actives {

		color: #FFF;
	}

	.service-options {
		font-size: 32rpx;
		font-family: FZLTHJW;
		color: #000;
		line-height: 25px;
		margin-bottom: 15rpx;
	}

	/* 是否排除 */
	.exclude {
		display: flex;
		justify-content: space-between;
	}

	/* 购买数量 */
	.purchase {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.number {
		background: #ECECEC;
		margin: 10rpx;
		padding: 6rpx 20rpx;
		font-size: 36rpx;
		color: #323233;
	}

	/* 输入微信号 */
	.input-wechat {
		border-top: 1rpx solid #F6F7F9;
		border-bottom: 1rpx solid #F6F7F9;
		padding: 24rpx 0;
	}

	/* 许个愿望 */
	.input-desire {
		margin-top: 28rpx;
		/* margin-left: 28rpx; */
		border-top: 1rpx solid #F6F7F9;
		border-bottom: 1rpx solid #F6F7F9;
		padding: 24rpx 0;
		min-height: 76rpx;
	}

	/* 支付方式 */
	.payment-item {
		margin-top: 28rpx;
	}

	.payment-list-cell {
		display: flex;
		margin-bottom: 30rpx;
	}

	.payment {
		display: flex;
		align-items: center;
		font-size: 30rpx;
	}

	.wechat-payment {
		margin-right: 10rpx;
	}

	.wechat-payment image {
		width: 46rpx;
		height: 46rpx;
	}

	/* 下单 */
	.lower-single {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 12rpx;
		padding-left: 20rpx;
		font-size: 32rpx;
	}

	.buy-now {
		border: 1px solid #AFB0B3;
		border-radius: 50rpx;
		padding: 16rpx 90rpx;
	}

	.buy-now text {
		color: #606266;
		font-size: 28rpx;
		display: initial;
		background-color: transparent;
	}
</style>
